require('@/public.js');
require('./css/realTimeMessage.css');
import { getWindowWidthAndHeight, debounce } from '@/utils/utils';

Jsborya.ready(function () {


	var app = new Vue({
		el: '#app',
		data: {
			off: {
				scrollIndex: 0,
			},
			drag: {
				status: 1,
				p: { x: 0, y: 0, time: 0 },
				style: { transform: 'translate3d(0,0,0)', WebkitTransform: 'translate3d(0,0,0)' },
			},
			messageList: [],
			boxHeight: '400px',
		},
		created () {
			Jsborya.webviewLoading({ isLoad: false });//关闭app加载层
		},
		mounted () {
			const vm = this;

			// 获取窗口宽高
			let { windowHeight, windowWidth } = getWindowWidthAndHeight();

			let headerHeight = windowWidth * 295 / 1242 + 1;
			vm.headerHeight = headerHeight;
			vm.boxHeight = windowHeight - headerHeight + 'px';
			document.getElementById("notice").style.top = headerHeight + 'px';

			Jsborya.getUserInfo(function (data) {
				vm.userInfo = data;

				vm.intervalGetMessage();
			});
		},
		methods: {
			intervalGetMessage (cb) {//消息循环获取
				const vm = this;

				vm.off.scrollIndex = 0;
				document.getElementById("messageBox").scrollTop = 0;
				vm.clearTimer();

				const json = {
					params: {
						time: 0,
						size: 40,
					},
					userInfo: vm.userInfo
				};

				vm.AJAX('/eas/w/searchcard/xnNotice', json, function (data) {
					let len = data.data.infoList.length;

					if (len) {
						vm.messageList = data.data.infoList;
					}

					if (!window.MessageTimer) {
						window.MessageTimer = [];
					};
					window.MessageTimer.push(setInterval(function () {
						vm.messageScroll();
					}, 3000));

				}, cb);


			},
			messageScroll () {//消息滚动
				const vm = this;

				let index = vm.off.scrollIndex,
					messageBox = document.getElementById("messageBox"),
					maxIndex = Math.floor((messageBox.scrollHeight - messageBox.offsetHeight) / 45);

				if (index < maxIndex) {
					vm.scrollAni(messageBox, 44);
					index++;
					vm.off.scrollIndex = index;
				} else {
					vm.intervalGetMessage();
				}

			},
			scrollAni (dom, dist) {
				let scrollTop = dom.scrollTop;

				let action = (currentScroll, targetScroll) => {
					setTimeout(() => {
						currentScroll += 1;
						dom.scrollTop = currentScroll;
						if (currentScroll < targetScroll) {
							action(currentScroll, targetScroll)
						}
					}, 5);
				}
				action(scrollTop, scrollTop + dist);
			},
			clearTimer () {
				window.MessageTimer && window.MessageTimer.forEach((item) => {
					clearInterval(item);
				});
			},
			startDrag: function (e) {
				e = e.changedTouches ? e.changedTouches[0] : e;
				this.drag.p = { "x": e.pageX, "y": e.pageY, time: new Date().getTime() };
				this.clearTimer();

				if (this.drag.status == 3) return false;
			},
			onDrag: function (e) {
				var event = e;

				e = e.changedTouches ? e.changedTouches[0] : e;
				let drag = this.drag;
				if (drag.status == 1 && !document.getElementById("messageBox").scrollTop) {
					// let duration=+new Date().getTime()-this.get('endDrop').time;//滑动时间
					let x = e.pageX - drag.p.x, y = e.pageY - drag.p.y,
						isDrop = Math.abs(x) < Math.abs(y) ? 1 : 0;//是否向下滑动

					if (0 < y && isDrop == 1) {
						event.preventDefault();
						this.drag.style = { transform: `translate3d(0,${y}px,0)`, WebkitTransform: `translate3d(0,${y}px,0)` };

						if (y > 60) {
							this.drag.status = 2;
						}
					}
				}

			},
			stopDrag: function (e) {
				e = e.changedTouches ? e.changedTouches[0] : e;

				const vm = this;
				let drag = this.drag;
				if (drag.status == 3) return false;

				let y = e.pageY - drag.p.y,
					duration = + new Date().getTime() - drag.p.time;//滑动时间

				if (y > 60 && drag.status == 2 && Number(duration) > 100) {

					this.drag.style = { transform: `translate3d(0,30px,0)`, WebkitTransform: `translate3d(0,30px,0)` };
					this.drag.status = 3;

					vm.intervalGetMessage(function () {
						setTimeout(() => {
							vm.drag.style = { transform: `translate3d(0,0,0)`, WebkitTransform: `translate3d(0,0,0)` };
							vm.drag.status = 1;
						}, 300)
					})
				} else {
					this.drag.style = { transform: `translate3d(0,0,0)`, WebkitTransform: `translate3d(0,0,0)` };
					this.drag.status = 1;
				}


				if (document.getElementById("messageBox").scrollTop) {
					let action = debounce(2000, function () {
						vm.intervalGetMessage();
					});
					action();
				}

			},
		}
	});

});